<template>
	<view class="prize-wrap">
		<view class="list">
			<view v-for="(item,index) in prizeList"
				:key="index"
				class="item">
				<image :src="item.albumPic"
					class="album-pic"
					mode="aspectFill"></image>
				<view class="info">
					<view class="name">
						{{item.albumName}}
					</view>
					<view class="extra">
						{{item.child.length}}/{{item.albumCount}}
					</view>
				</view>
				<view class="child">
					<view v-for="(childitem,childIndex) in item.child"
						:key="childIndex"
						class="child-item">
						<image :src="childitem.prizeImage"
							class="prize-pic"
							mode="aspectFill"></image>
						<view class="prize-name">
							{{childitem.prizeName}}
						</view>
						<view class="num"> x {{childitem.count}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				prizeList: []
			}
		},
		onLoad() {
			this.getInfo()
		},
		methods: {
			async getInfo() {
				let res = await this.$http.get("/getPrizeRecord?prize_type=photo")
				if (res.data.code == 0) {
					let data = res.data.data
					let list = []
					for (let i = 0; i < data.length; i++) {
						let info = data[i]
						if (!info.albumId) continue
						let index = list.findIndex((item) => {
							return item.albumId == info.albumId
						})
						if (index === -1) {
							list.push({
								albumId: info.albumId,
								albumName: info.albumName,
								albumPic: info.albumPic,
								albumCount: info.albumCount,
								child: []
							})
							index = list.length - 1
						}
						let index_child = list[index].child.findIndex((item) => {
							return item.prizeId == info.prizeId
						})
						if (index_child === -1) {
							list[index].child.push({
								prizeId: info.prizeId,
								prizeImage: info.prizeImage,
								prizeName: info.prizeName,
								count: 1
							})
						} else {
							list[index].child[index_child].count += 1
						}
					}
					this.prizeList = list
				}
			}
		}
	}
</script>
<style lang="scss"
	scoped>
	.prize-wrap {
		width: 100%;
		min-height: 100vh;
		background: #f6f6f6;

		.list {
			padding: 30rpx 30rpx 0;

			.item {
				margin-bottom: 30rpx;
				background: #fff;
				padding: 20rpx 20rpx 0rpx;
				border-radius: 10rpx;

				.album-pic {
					width: 100%;
					height: 300rpx;
					border-radius: 10rpx;
				}

				.info {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 10rpx;

					.extra {
						color: #FF893F;
						font-size: 36rpx;
						font-weight: 900;
						padding-left: 20rpx;
					}
					.name{
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						flex: 1;
					}
				}

				.child {
					padding: 20rpx 0 0;
					.child-item {
						display: flex;
						align-items: center;
						padding: 20rpx 0;
						border-top: 1px solid #f6f6f6;
						.prize-pic {
							width: 60rpx;
							height: 60rpx;
							display: block;
							border-radius: 10rpx;
						}

						.prize-name {
							flex: 1;
							margin: 0 16rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							font-size: 26rpx;
						}
					}
				}
			}
		}
	}
</style>